<template>
  <view>
    <view class="sticky">
      <v-tabs v-model="current" :scroll="false" :tabs="tabs" @change="changeTab" bgColor="#00000000"/>
    </view>
    <checkbox-group @change="checkChange">
      <view v-if="current === 0">
        <view v-for="(item, index) in dataShopList" :key="index" class="box-item">
          <view class="title-lay">
            <checkbox v-if="edit" :value="item.id" style="transform:scale(0.7);margin-right: 20rpx"/>
            <view class="address">{{ item.area }}</view>
            <view class="time">{{ $wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss') }}</view>
          </view>
          <view class="content">
            <view>{{ item.title }}</view>
            <view>代理人: {{ item.name }}</view>
            <view>联系方式: {{ item.phone}}</view>
            <view>微信号: {{ item.wechat}}</view>
            <view>公司: {{ item.company}}</view>
            <view>留言内容: {{ item.leave_word }}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <view v-for="(item, index) in dataMyList" :key="index" class="box-item">
          <view class="title-lay">
            <checkbox v-if="edit" :value="item.id" style="transform:scale(0.7);margin-right: 20rpx"/>
            <view class="address">{{ item.area }}</view>
            <view class="time">{{ $wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss') }}</view>
          </view>
          <view class="content">
            <view>{{ item.title }}</view>
            <view>代理人: {{ item.contacts}}</view>
            <view>联系方式: {{ item.contact_number}}</view>
            <view>代理意向: {{ item.industry }}</view>
            <view>详细内容: {{ item.content }}</view>
          </view>
      </view>
      </view>
    </checkbox-group>
    <uni-load-more :status="status" :content-text="contentText" />
    <view style="height: 200rpx"></view>
    <view v-if="current === 1 && !edit" class="btn-submit" @tap="$wanlshop.auth('/pages/distributors/addDistributors')">发布代理</view>
    <view v-if="edit" class="btn-submit" @tap="deleteItem">删除</view>
    <view class="btn-edit" @click="edit = !edit">{{ edit? "完成":"管理" }}</view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      current: 0,
      edit: false,
      onepage: 1,
      twopage: 1,
      checkArray:[],
      tabs: ['我的留言', '已发留言'],
      search:{
        current_page: 1, //当前页码
      },
      dataShopList:[],
      dataMyList:[],
      status: 'loading',
      contentText: {
        contentdown: ' ',
        contentrefresh: '加载中',
        contentnomore: ''
      }
    };
  },
  onLoad() {
    if (this.current === 0){
      this.getShopList()
    }else {
      this.getMyList()
    }

  },
  onPullDownRefresh() {
    this.onepage = 1
    this.twopage = 1
    if (this.current === 0){
      this.getShopList()
    }else {
      this.getMyList()
    }
  },
  onReachBottom() {
    //判断是否最后一页
    this.status = 'loading';
    if (this.current === 0){
      this.getShopList()
    }else {
      this.getMyList()
    }
  },
  methods: {
    changeTab(index) {
      this.current_page = 1;
      this.checkArray = []
      if (index === 0){
        this.getShopList()
      }else {
        this.getMyList()
      }
    },
    checkChange(e){
      this.checkArray = e.detail.value
      console.log(this.checkArray)
    },

    getShopList(){
      this.search.current_page = this.onepage
      this.$api.get({
        url: '/wanlshop/shop/leaveWordReceive',
        data: this.search,
        success: res => {
          if (this.search.current_page === 1){
            this.dataShopList = res.data;
          }else {
            this.dataShopList = this.dataShopList.concat(res.data)
          }
          console.log(JSON.stringify(this.dataShopList))
          if (res.last_page === res.current_page) {
            this.status = 'noMore';
          } else {
            this.onepage++
            this.status ='more';
          }
        }
      })

    },

    getMyList(){
      this.search.current_page = this.twopage
      this.$api.get({
        url: '/wanlshop/shop/leaveWordPublish',
        data: this.search,
        success: res => {
          if (this.search.current_page === 1){
            this.dataMyList = res.data;
          }else {
            this.dataMyList = this.dataMyList.concat(res.data)
          }

          if (res.last_page === res.current_page) {
            this.status = 'noMore';
          } else {
            this.twopage++
            this.status ='more';
          }
        }
      })

    },
    deleteItem(){
      const _that = this
      if (this.checkArray.length === 0){
        this.$wanlshop.msg('请选择要删除的数据')
      }else{
        this.$api.post({
          url: '/wanlshop/shop/leaveWordDelete',
          data: {
            type: this.current+1,
            ids: this.checkArray.join(',')
          },
          success: res => {
            _that.$wanlshop.msg('删除成功')
            _that.ghty = []
            _that.edit = false
            _that.search.current_page = 1
            if (_that.current === 0){
              _that.getShopList()
            }else {
              _that.getMyList()
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.btn-submit{
  width: 700rpx;
  margin: 30rpx 25rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #ff9000;
  border-radius: 15rpx;
  color: white;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
.btn-edit{
  height: 100rpx;
  line-height: 100rpx;
  width: 100rpx;
  border-radius: 50rpx;
  background: #ff9000;
  text-align: center;
  color: white;
  position: fixed;
  bottom: 140rpx;
  right: 40rpx;
}

.box-item{
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 22rpx;
  border-radius: 15rpx;
}
.box-item .title-lay{
  height: 80rpx;
  display: flex;
  padding: 0 20rpx;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}
.box-item .title-lay .address{
  color: black;
  font-size: 30rpx;
  flex: 1;
}
.box-item .title-lay .time{
  color: black;
  font-size: 30rpx;
}
.link{
  color: #ff9000;
  margin-left: 10rpx;
}
.box-item .content{
  color: #666;
  font-size: 30rpx;
  line-height: 2;
  padding: 20rpx;
}
.sticky {
  position: -webkit-sticky; /* 兼容 Safari */
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #f8f9fa;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
</style>
